<!-- 个人设置页面 -->
<template>
  <div>
    <el-drawer title="☁ 云库，请在这里复制文件引用~" :visible.sync="cloud" direction="ttb"
      style="height:2350px; text-align: center;">
      <resources :id="-2"></resources>
    </el-drawer>
    <div class="row" v-loading="isOp">

      <div class="col-12">
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="author-bio">
              <div class="author-image ml-30">
                <el-image :src="user.avater">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline mt-50 ml-30" style="white-space:nowrap;">头像</i>
                  </div>
                </el-image>

              </div>
            </div>
            <input v-model="user.avater" class="form-control"  type="text"
              placeholder="头像链接粘贴到这里">
          </el-col>
          <el-col :span="4">
            <button class="btn btn-radius bg-info ml-10 text-white mb-10 mt-30 box-shadow" type="text"
              @click="cloud = true">打开云库</button>

          </el-col>
          <el-col :span="2">
            <button class="btn btn-radius bg-info ml-10 text-white mb-10 mt-30 box-shadow" type="text"
              @click="sent">保存</button>
          </el-col>
        </el-row>


      </div>
      <div class="col-sm-6 mt-10 ml-10 mb-10">
        <el-radio v-model="user.sex" label="MAN">男</el-radio>
        <el-radio v-model="user.sex" label="WOMAN">女</el-radio>
      </div>
      <div class="col-sm-6">
        <div class="form-group">
          <input v-model="user.nickname" class="form-control" type="text" placeholder="昵称">
        </div>
      </div>

      <div class="col-12">
        <div class="form-group">
          <input v-model="user.slogan" class="form-control"  type="text" placeholder="签名">
        </div>
      </div>
      <div class="col-12">
        <div class="form-group">
          <input v-model="video" class="form-control" type="text" placeholder="背景影片粘贴到这里">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import Resources from '@/components/module/resources'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      Resources
    },
    props: ['user', 'video'],
    data() {
      //这里存放数据
      return {
        isOp: false,
        cloud: false,
        
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      async sent() {
        this.isOp = true;
        this.user.unicode = this.video;
        await this.$api.user.update(this.user);
        this.isOp = false;
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>

</style>
